---
title: Kbd
description: A typography component for displaying keyboard input and shortcuts.
metaDescription: Kbd component for React and Solid.js displaying keyboard shortcuts and key combinations. Show keyboard input with proper semantic markup and styling.
category: typography
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/kbd.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Kbd } from '@/components/ui'
```

```tsx
<Kbd>F12</Kbd>
```

## Examples

### Combinations

Display keyboard shortcuts that require multiple keys pressed simultaneously:

<ComponentExample name="combinations" />

### Modifier Keys

Showcase common modifier keys using their symbolic representations:

<ComponentExample name="modifier-keys" />

### Variants

Customize the appearance with different visual styles to match your design:

<ComponentExample name="variants" />

### Sizes

Adjust the size to match surrounding text or interface elements:

<ComponentExample name="sizes" />

### Inline

Integrate keyboard shortcuts naturally within instructional text:

<ComponentExample name="inline" />

## Props

<PropsTable />